<template>
    <div
        style="position : absolute;width : 100%;height : 100%;background:#FFFF;background-repeat: no-repeat;background-size: 100% 120%;">
        <el-container class="container">
            <el-container>
                <!--侧边布局-->
                <el-aside>
                    <!--伸缩按钮-->
                    <!-- <div class="toggle-button" @click="toggleCollapase">|||</div> -->
                    <!--侧边栏菜单区 unique-opened="true" 只保持一个菜单展开 router开启路由 active-text-color 颜色-->
                    <el-menu class="menu" background-color="#464C59" text-color="#FFFFFF" active-text-color="#409EFF"
                        unique-opened :collapse="isCollapse" :collapse-transition="false">
                        <el-submenu :index="item.id + ''" v-for="item in chapterVideoList" :key="item.id"
                            background-color="#252B3A">
                            <template slot="title">
                                <span>{{ item.title }}</span>
                            </template>
                            <el-menu-item v-for="it in item.children" :key="it.id" @click="contentDisplay(it)">
                                <template slot="title">
                                    <img class="cuorse-icon"
                                        src="https://read-picture-001.oss-cn-beijing.aliyuncs.com/course-list-icon.png">
                                    <span class="chapter-title">{{ it.title }}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!--主体布局-->
                <el-main>
                    <!--路由占位符-->
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import courseApi from '@/api/course'
export default {
    layout: 'player',//应用video布局
    asyncData({ params, error }) {
        console.log(params)
        return {
            courseId: params.cid
        }
    },
    data() {
        return {
            chapterVideoList: [], // 章节信息
            isCollapse: false,
        }
    },
    mounted() {
        this.initChapter()
    },



    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 查询该id下的课程信息
        initChapter() {
            courseApi.getChapterVideoInfo(this.courseId)
                .then(response => {
                    this.chapterVideoList = response.data.data.list
                    console.log('this.chapterVideoList', this.chapterVideoList)
                    console.log('response.data.data.list', response.data.data.list)
                })
        },
        //课程内容展示
        contentDisplay(chapter) {
            console.log('chapter', chapter)
            let routeData = this.$router.resolve('/player/' + chapter.videoSourceId)
            window.open(routeData.href, '_parent')


        }

    }
}
</script>

<style scoped>
.container {
    height: 100%;
    margin: 0;
}

.menu {
    height: 100%;
}

.cuorse-icon {
    width: 16px;
    height: 16px;
}

.chapter-title {
    margin-right: 0;
}
</style>